<!-- 筛选条件组件 -->
<template>
  <div class="form-search">
    <div v-if="formItem && formItem.length > 0">
      <div>
        <el-form :model="form" size="small" label-width="100px">
          <el-row class="elRowCss">
            <el-col v-for="(item, index) in formItem" :key="index" :span="item.width || 6">
              <el-form-item :key="index" :label="item.label" :prop="item.value" style="width: 100%">
                <!--输入框-->
                <el-input v-if="item.type === 'input'" v-model="form[item.value]" :disabled="item.disabled" clearable
                  :placeholder="item.placeholder || '请输入'" />
                <!-- 选择器 -->
                <el-select class="full-width" v-if="item.type === 'select'" v-model="form[item.value]"
                  :disabled="item.disabled" clearable :placeholder="item.placeholder || '请选择'">
                  <el-option v-for="(option, i) in item.children" :key="i" :value="option.value"
                    :label="option.label" />
                </el-select>
                <!--多选框-->
                <el-checkbox-group v-if="item.type === 'checkboxGroup'" v-model="form[item.value]"
                  :disabled="item.disabled">
                  <el-checkbox v-for="(option, i) in item.children" :key="i" :label="option.value">{{ item.label
                    }}</el-checkbox>
                </el-checkbox-group>
                <!--日期选择器 区间-->
                <el-date-picker class="full-width" v-if="item.type === 'datePicker'" v-model="form[item.value]"
                  :disabled="item.disabled" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
                  start-placeholder="开始日期" end-placeholder="结束日期" />
              </el-form-item>
            </el-col>
            <!-- 如果当前行表单项不足4个，则在当前行最后面放置确认取消按钮 -->
            <el-col v-if="formItem.length % 4 !== 0" :span="24 - (formItem.length % 4) * 6">
              <div class="button-list">
                <el-button size="small" icon="el-icon-search" type="primary" @click="searchForm">查询</el-button>
                <el-button size="small" icon="el-icon-refresh" @click="clearData">重置</el-button>
                <slot></slot>
              </div>
            </el-col>
          </el-row>
          <!-- 如果当前行表单项满足，则另起一行在最后面放置确认取消按钮 -->
          <template v-if="formItem.length % 4 === 0">
            <el-row>
              <el-col :span="24">
                <div class="button-list">
                  <el-button size="small" icon="el-icon-search" type="primary" @click="searchForm">查询</el-button>
                  <el-button size="small" icon="el-icon-refresh" @click="clearData">重置</el-button>
                  <slot></slot>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'comForm',
  // 组件参数 接收来自父组件的数据
  props: {
    formItem: {
      // form查询项
      type: Array,
      default: () => [],
    },
    formData: {
      // form查询数据
      type: Object,
      default: () => { },
    },
  },
  // 组件状态值
  data() {
    return {
      form: { ...this.formData },
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},

  created() { },

  mounted() {

  },

  // 组件方法
  methods: {
    // 查询
    searchForm() {
      this.$emit('searchForm', this.form)
    },
    // 重置
    clearData() {
      this.form = JSON.parse(JSON.stringify(this.formData))
      // console.log('[ this.form ]', this.form)
      // 重置判断逻辑，填写项禁用状态下，不执行清空操作，反之则进行清空
      this.formItem.forEach(item => {
        if (!item.disabled) {
          // console.log('item', item);
          // console.log('[ Object.keys(this.form) ] >', Object.keys(this.form))
          Object.keys(this.form).map(key => {
            // console.log('[ item.value ]', item.value)
            // console.log('[ key ]', key)
            if (item.value === key) {
              if (this.form[key].constructor === String) {
                this.form[key] = ''
              }
              if (this.form[key].constructor === Array) {
                this.form[key] = []
              }
            }
          })
        }
      });

      // Object.keys(this.form).map(key => {
      //   if (this.form[key].constructor === String) {
      //     this.form[key] = ''
      //   }
      //   if (this.form[key].constructor === Array) {
      //     this.form[key] = []
      //   }
      // })
      this.$emit('clearForm', this.form)
    },
  },
}
</script>

<style lang="scss" scoped>
.form-search {
  margin: 10px 0;

  .elRowCss {
    display: flex; //设置布局
    flex-wrap: wrap; //进行换行操作

    .el-form-item {
      padding: 0;
    }
  }

  .button-list {
    text-align: right;
  }
}

.full-width {
  width: 100%;
  box-sizing: border-box;
}
</style>
